<template>
  <!-- ISV支付配置 -->
  <div class="isv-config">
    <!-- 导航 -->
    <tz-breadcrumb :pathArr='[{"name": "系统配置"},{"name": "ISV支付配置", "url": ""}]'></tz-breadcrumb>
    <!-- 数据表单 -->
    <div style="margin: 20px;"></div>
    <el-card class="box-card">
      <!-- <div slot="header" class="clearfix">
    <span>ISV服务商-各支付渠道配置</span>
    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
  </div> -->
      <div class="text item">
        <el-tabs value="alipay"
                 @tab-click="handleClick"
                 v-loading="loading">
          <el-tab-pane label="支付宝"
                       name="alipay">
            <!-- 支付宝配置 -->
            <el-form :label-position="labelPosition"
                     class=""
                     label-width="200px">
              <el-form-item label="APP名称">
                <el-input class="form-input"
                          v-model="alipay.app_name"></el-input>
              </el-form-item>
              <el-form-item label="APP_ID">
                <el-input class="form-input"
                          v-model="alipay.app_id"></el-input>
              </el-form-item>
              <el-form-item label="PID">
                <el-input class="form-input"
                          v-model="alipay.pid"></el-input>
              </el-form-item>
              <el-form-item label="应用网关">
                <el-input class="form-input"
                          v-model="alipay.notify"></el-input>
              </el-form-item>
              <el-form-item label="授权回调地址">
                <el-input class="form-input"
                          v-model="alipay.callback"></el-input>
              </el-form-item>
              <el-form-item label="店铺通知地址">
                <el-input class="form-input"
                          v-model="alipay.operate_notify_url"></el-input>
              </el-form-item>
              <el-form-item label="应用私钥">
                <el-input class="form-input"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 12}"
                          v-model="alipay.rsaPrivateKey"></el-input>
              </el-form-item>
              <el-form-item label="支付宝公钥">
                <el-input class="form-input"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 12}"
                          v-model="alipay.alipayrsaPublicKey"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="onSubmit('alipay')">保存修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="微信支付"
                       name="weixin"
                       :lazy=true>
            <!-- 微信配置 -->
            <el-form ref="weixinForm"
                     :label-position="labelPosition"
                     class=""
                     label-width="220px">
              <el-form-item label="APP_ID">
                <el-input class="form-input"
                          v-model="weixin.app_id"></el-input>
              </el-form-item>
              <el-form-item label="secret">
                <el-input class="form-input"
                          v-model="weixin.secret"></el-input>
              </el-form-item>
              <el-form-item label="微信商户号">
                <el-input class="form-input"
                          v-model="weixin.merchant_id"></el-input>
              </el-form-item>
              <el-form-item label="通知地址">
                <el-input class="form-input"
                          v-model="weixin.notify_url"></el-input>
              </el-form-item>
              <el-form-item label="商户支付私钥">
                <el-input class="form-input"
                          v-model="weixin.key"></el-input>
              </el-form-item>
              <el-form-item label="证书文件(apiclient_cert.pem )">
                <!-- <el-input type="file"
                          class="form-input"></el-input> -->
                <el-upload ref="upload"
                           action=""
                           :http-request="handleFile"
                           :on-change="cert_path_file"
                           :multiple="false"
                           :limit="1"
                           :file-list="cert_path"
                           accept=".pem">
                  <el-button size="small"
                             type="primary"
                             @click="clearUploadedImage('upload')">点击上传</el-button>
                  <div slot="tip"
                       class="el-upload__tip">只能上传.pem文件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="密钥文件(apiclient_key.pem)">
                <!-- <el-input type="file"
                          class="form-input"></el-input> -->
                <el-upload ref="upload1"
                           action=""
                           :http-request="handleFile"
                           :on-change="key_path_file"
                           :multiple="false"
                           :limit="1"
                           :file-list="key_path"
                           accept=".pem">
                  <el-button size="small"
                             type="primary"
                             @click="clearUploadedImage('upload1')">点击上传</el-button>
                  <div slot="tip"
                       class="el-upload__tip">只能上传.pem文件</div>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="onSubmit('weixin')">保存修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="网商银行"
                       name="mybank"
                       :disabled=false>
            <!-- 网商银行 -->
            <el-form :label-position="labelPosition"
                     class=""
                     label-width="200px">
              <el-form-item label="appid">
                <el-input class="form-input"
                          v-model="mybank.appid"></el-input>
              </el-form-item>
              <el-form-item label="ISVORGID">
                <el-input class="form-input"
                          v-model="mybank.isv_org_id"></el-input>
              </el-form-item>
              <el-form-item label="服务商私钥">
                <el-input class="form-input"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 12}"
                          v-model="mybank.rsa_private_key"></el-input>
              </el-form-item>
              <el-form-item label="服务商公钥">
                <el-input class="form-input"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 12}"
                          v-model="mybank.rsa_public_key"></el-input>
              </el-form-item>
              <el-form-item label="网商银行提供公钥">
                <el-input class="form-input"
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 12}"
                          v-model="mybank.rsa_public_key_mybank"></el-input>
              </el-form-item>
              <el-form-item label="支付交易结果回调地址">
                <el-input class="form-input"
                          v-model="mybank.notify"></el-input>
              </el-form-item>
              <el-form-item label="打款失败通知的地址">
                <el-input class="form-input"
                          v-model="mybank.dk_notify"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="onSubmit('mybank')">保存修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

  </div>
</template>

<script>
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import http from './../../config/index';
import api from './../../api/api';
export default {
  mounted: function () {
    this.initdata();
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data: () => {
    return {
      alipay: {},
      weixin: {},
      mybank: {},
      labelPosition: '',
      loading: false,
      cert_path: [],
      key_path: []
    };
  },
  methods: {
    initdata: function () {
      this.getData(api.getAlipayConf);
      // this.getData(api.getwechatpayconfig);
    },
    handleClick (tab, event) {
      if (tab.name === 'alipay' && Object.keys(this.alipay).length === 0) {
        this.getData(api.getAlipayConf);
      } else if (tab.name === 'weixin' && Object.keys(this.weixin).length === 0) {
        this.getData(api.getwechatpayconfig);
      } else if (tab.name === 'mybank' && Object.keys(this.mybank).length === 0) {
        this.getData(api.getmybankconfig);
      }
    },
    handleFile () {
      // console.log(this.fileList[0]);
    },
    cert_path_file (file, fileList) {
      this.cert_path = fileList;
    },
    key_path_file (file, fileList) {
      this.key_path = fileList;
    },
    clearUploadedImage (type) {
      if (type === 'upload') {
        this.$refs.upload.clearFiles();
        this.cert_path = [];
      } else if (type === 'upload1') {
        this.$refs.upload1.clearFiles();
        this.key_path = [];
      }
    },
    onSubmit (type) {
      let data = {};
      let url = '';
      if (type === 'alipay' && this.alipay !== []) {
        url = api.setalipayconfig;
        data = {
          'id': this.alipay.id,
          'app_id': this.alipay.app_id,
          'pid': this.alipay.pid,
          'rsaPrivateKey': this.alipay.rsaPrivateKey,
          'alipayrsaPublicKey': this.alipay.alipayrsaPublicKey,
          'callback': this.alipay.callback,
          'operate_notify_url': this.alipay.operate_notify_url,
          'notify': this.alipay.notify
        };
        data.token = localStorage.getItem('token');
        this.setData(url, data);
      }

      if (type === 'mybank') {
        url = api.setmybankconfig;
        data = {
          'id': this.mybank.id,
          'appid': this.mybank.appid,
          'isv_org_id': this.mybank.isv_org_id,
          'rsa_private_key': this.mybank.rsa_private_key,
          'rsa_public_key': this.mybank.rsa_public_key,
          'rsa_public_key_mybank': this.mybank.rsa_public_key_mybank,
          'dk_notify': this.mybank.dk_notify,
          'notify': this.mybank.notify
        };
        data.token = localStorage.getItem('token');
        this.setData(url, data);
      }

      if (type === 'weixin') {
        url = api.setwechatpayconfig;
        let form = this.$refs['weixinForm'].$el;
        let formData = new FormData(form);
        formData.append('token', localStorage.getItem('token'));
        formData.append('id', this.weixin.id);
        formData.append('app_id', this.weixin.app_id);
        formData.append('merchant_id', this.weixin.merchant_id);
        formData.append('secret', this.weixin.secret);
        formData.append('key', this.weixin.key);
        formData.append('notify_url', this.weixin.notify_url);
        formData.append('cert_path', this.cert_path[0] ? this.cert_path[0].raw : '');
        formData.append('key_path', this.key_path[0] ? this.key_path[0].raw : '');
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        http.form(url, formData, config, response => {
          // console.log(response.data);
          this.loading = false;
          if (response.code === '10001') {
            this.cert_path = [];
            this.key_path = [];
            this.$message('设置完成');
          } else {
            this.$message.error(response.msg);
          }
        }, () => {
          this.$message.error('网络错误');
          this.loading = false;
        });
      }
    },
    setData (url, data) {
      let that = this;
      this.loading = true;
      http.post(url, data, response => {
        that.loading = false;
        if (response.code === '10001') {
          that.$message('设置完成');
        } else {
          that.$message.error('设置失败');
        }
      }, () => {
        that.$message.error('网络错误');
        that.loading = false;
      });
    },
    getData (url) {
      let that = this;
      that.loading = true;
      http.get(url, {
        token: localStorage.getItem('token')
      }, response => {
        that.loading = false;
        console.log(666);
        if (response.code === '10001') {
          switch (url) {
            case '/system/getalipayconfig':
              console.log(response.data.length);
              if (response.data.length > 0) {
                that.alipay = response.data[0];
              } else {
                that.alipay = response.data;
              }
              break;
            case '/system/getwechatpayconfig':
              if (response.data.length > 0) {
                that.alipay = response.data[0];
              } else {
                that.alipay = response.data;
              }
              break;
            case '/system/getmybankconfig':
              that.mybank = response.data[0];
              break;
          }
        }
      }, () => {
        that.$message.error('网络错误');
        that.loading = false;
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding 2rem
  padding-right 200px
  margin-top 15px
  margin-bottom 12px
  box-sizing border-box
  background #fff
  box-shadow 1px 1px 1px #999
  .form-item
    display inline-block
    margin-right 35px
    label
      font-size 14px
      color #333
      width 200px
      display inline-block
    .form-input, .form-select
      width 200px
  .line
    height 15px
.server-item
  width 20px
  height 20px
  margin 5px
</style>
